<template>
  <div class="analyise-search-body">
    <slot name="timeBar">
    </slot>
    <Treeselect noChildrenText="没有更多数据" noOptionsText="暂无数据" v-model="filterText" :options="treeData" :alwaysOpen="true" :max-height="450" placeholder="请选择设备..." @select="onSelect" />
    <div class="drawer-footer">
      <Button type="primary" @click="handleExport">导出</Button>
    </div>
  </div>
</template>
<script>
import { getDeviceList } from "@/api"
import format from "@/utils/format"
import { mapState } from "vuex"

export default {
  props: {
    companyId: {
      type: String
    }
  },
  computed: {
    ...mapState({
      userRole: state => state.userInfo.rname
    })
  },
  data: () => ({
    filterText: null,
    options: {},
    treeData: [],
    dateType: ""
  }),
  watch: {
    companyId() {
      this._getDeviceList()
    }
  },
  mounted() {
    this._getDeviceList()
  },
  beforeDestroy() {},
  methods: {
    _getDeviceList() {
      const vm = this
      const params = { companyId: vm.companyId, filter: true }
      getDeviceList(params).then(res => {
        if (res.code === 200 && res.data) {
          if (this.userRole === "ROLE_DEMO") {
            vm.treeData = format.formatTree1(res.data.group, res.data.device)
          } else {
            vm.treeData = format.formatTree(res.data.group, res.data.device)
          }
        } else {
          vm.treeData = []
        }
      })
    },

    onSelect(value) {
      const vm = this
      // 区域
      if (value.children) {
        return false
      } else {
        // 设备
        this.$emit("change", {
          groupId: null,
          deviceNo: value.deviceId
        })
      }
    },

    handleExport() {
      this.$emit("download")
    }
  }
}
</script>
